<template>
    <div class="login">

        <div class="login-iconall">
            <van-icon
                    name="iconfont icon-icon_weixin-logo"
                    class="iconfont login-icon"
                    color="#02df6d" size="120px"
                    @click="wechatlogin"
            />
            <p>使用微信登陆更加便捷</p>
        </div>
    </div>
</template>



<script>
    import "@/assets/scss/iconfont/wechat.css";

    import field from '@/components/field/';
    import fieldGroup from '@/components/field-group/';

    import {authLoginByAccount} from '@/api/api';
    import {setLocalStorage} from '@/utils/local-storage';
    import {emailReg, mobileReg} from '@/utils/validate';

    import {Toast} from 'vant';


    export default {
        name: 'login-request',
        components: {
            [field.name]: field,
            [fieldGroup.name]: fieldGroup,
            Toast
        },
        data() {
            return {
                account: 'user123',
                password: 'user123',
                visiblePass: false,
                isLogining: false,
                userInfo: {}
            };
        },
        created(){

        },
        methods: {
            wechatlogin(){
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5b93f2b90f92962d&redirect_uri=' +
                    encodeURIComponent('http://www.moteer.top/#/loginbywx') + '&response_type=code&scope=snsapi_userinfo#wechat_redirect'
            },
            clearText() {
                this.account = '';
            },

            validate() {

            },

            login(code) {
                let loginData = this.getLoginData();
                authLoginByAccount(loginData).then(res => {
                    this.userInfo = res.data.data.userInfo;
                    setLocalStorage({
                        Authorization: res.data.data.token,
                        avatar: this.userInfo.avatarUrl,
                        nickName: this.userInfo.nickName,
                        userId: this.userInfo.userId
                    });

                    this.routerRedirect();
                }).catch(error => {
                    Toast.fail(error.data.errmsg);
                });
            },

            loginSubmit() {
                this.isLogining = true;
                try {
                    this.validate();
                    this.login();
                    this.isLogining = false;
                } catch (err) {
                    console.log(err.message);
                    this.isLogining = false;
                }
            },

            routerRedirect() {
                // const { query } = this.$route;
                // this.$router.replace({
                //   name: query.redirect || 'home',
                //   query: query
                // });
                window.location = '#/user/';
            },

            getLoginData() {
                const password = this.password;
                const account = this.getUserType(this.account);
                return {
                    [account]: this.account,
                    password: password
                };
            },

            getUserType(account) {
                const accountType = mobileReg.test(account)
                    ? 'mobile'
                    : emailReg.test(account)
                        ? 'email'
                        : 'username';
                return accountType;
            }
        }
    };
</script>

<style scoped>
    .login-iconall {
        height: 200px;
        width: 200px;
        background-color: #ffffff;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        /*overflow: hidden;*/
        text-align: center;
        margin-top: -100px;
        position: relative;
        top: 50%;
        left: 50%;
        margin-left: -100px;
    }

    .login-iconall > i {
        line-height: 200px;
    }

    p {
        width: 100%;
        position: absolute;
        text-align: center;
        bottom: -50px;
    }
</style>

<style lang="scss" scoped>
    @import '../../assets/scss/mixin';

    .login {
        position: relative;
        background-color: #fff;
    }

    .store_header {
        text-align: center;
        padding: 30px 0;

        .store_avatar img {
            border-radius: 50%;
        }

        .store_name {
            padding-top: 5px;
            font-size: 16px;
        }
    }

    .register {
        padding-top: 40px;
        color: $font-color-gray;

        a {
            color: $font-color-gray;
        }

        > div {
            width: 50%;
            box-sizing: border-box;
            padding: 0 20px;
        }

        .connect {
            @include one-border(right);
            text-align: right;
        }
    }

    .bottom_positon {
        position: absolute;
        bottom: 30px;
        width: 100%;
    }
</style>
